﻿<template>
  <div class="table">
    <!--表2季度生产情况T_MulQuartProduc-->
    <div class="divSearch">
      <Row>
        <Col span="24" class="col-margin"> 填报年度：
        <Select v-model="searchModel.FillInYear" placeholder="全部" style="width: 100px" @on-change="getPageData()">
            <Option value="">全部</Option>
            <Option :value="item.DictText" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
        </Select> 
        <!-- 时间周期：
        <Select v-model="searchModel.TimesType" placeholder="全部" style="width: 100px" @on-change="getPageData()">
            <Option value="">全部</Option>
            <Option :value="item.DictValue" v-for="item in CycleList" :key="item.DictValue">{{item.DictText}}</Option>
        </Select> -->
        <Button icon="ios-search" type="ghost" @click="getPageData()" style="margin-left: 5px;background: linear-gradient(to bottom, #64c8ef 0%,#00a2e2 100%);color: #fff;border-radius: 3px;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);">
            查询
        </Button>
        <Button icon="ios-cloud-download" type="primary" @click="TmpDown()" class="searchButton" style="width: 100px;">模板下载</Button>
        </Col>
      </Row>
    </div>
    <Row>
      <Col span="24" class="col-margin">
      <Table size="small" :height="clientHeight" border :context="ctx" :columns="columnsList" :data="datas.rows" no-data-text='暂无数据...'></Table>
      </Col>
    </Row>
    <Row>
      <Col span="24">
      <Page style="float:right;margin: 5px 20px 5px 0;" class="page-style" :total="datas.total" placement="top" @on-change="getPageNumber"
        :page-size="searchModel.PageSize" :page-size-opts='pageSizeOpts' show-sizer @on-page-size-change="getPageSize" show-total
        show-elevator></Page>
      </Col>
    </Row>
    <Form ref="dataModel" :model="dataModel" :rules="ruleModel">
      <Modal v-model="showType" :mask-closable="false" width="1200">
        <p slot="header" class="title">
          <Icon type="ios-paper" size="20"></Icon>
          <span style="font-size: 20px">表2季度生产情况填报</span>
        </p>
        <p slot="close">
          <Icon type="close-circled" color="red" size=25></Icon>
        </p>
        <table class="reptable" style="width:100%">
          <tr>
            <th>发种量<br/>（张）</th>
            <th>鲜茧产量<br/>（吨）</th>
            <th>鲜茧均价<br/>（元/公斤）</th>
            <th>小蚕共育<br/>（张）</th>
            <th>方格簇<br/>（张）</th>
            <th>预计下季度发种量<br/>（张）</th>
            <th>预计下季度鲜茧产量<br/>（吨）</th>
          </tr>
          <tr style="height:40px;">
            <td style="text-align:right;">
              <Input style="display:none;" v-model="dataModel.Id"></Input>
              <Input style="display:none;" v-model="dataModel.ReportId"></Input>
              <Form-item prop="SeedSize">
                <Input v-model="dataModel.SeedSize"></Input>
              </Form-item>
            </td>
            <td style="text-align:right;">
              <Form-item prop="FreshCocoonYield">
                <Input v-model="dataModel.FreshCocoonYield"></Input>
              </Form-item>
            </td>
            <td style="text-align:right;">
              <Form-item prop="AveFreshCocoon">
                <Input v-model="dataModel.AveFreshCocoon"></Input>
              </Form-item>
            </td>
            <td style="text-align:right;">
              <Form-item prop="SmallRearSilk">
                <Input v-model="dataModel.SmallRearSilk"></Input>
              </Form-item>
            </td>
            <td style="text-align:right;">
              <Form-item prop="GridCluster">
                <Input v-model="dataModel.GridCluster"></Input>
              </Form-item>
            </td>
            <td style="text-align:right;">
              <Form-item prop="NextSeaFresh">
                <Input v-model="dataModel.NextSeaFresh"></Input>
              </Form-item>
            </td>
            <td style="text-align:right;">
              <Form-item prop="NextSeaOutPut">
                <Input v-model="dataModel.NextSeaOutPut"></Input>
              </Form-item>
            </td>
          </tr>
        </table>
        <div style="text-align:right;padding-top:10px">
          <Button type="primary" @click="save('dataModel')">保存</Button>
          <Button type="ghost" @click="cancel('dataModel')" style="margin-left: 8px">取消</Button>
        </div>
        <div slot="footer">
          <Alert style="margin-top:5px;text-align:left;font-size:14px;" banner type="error">
            <p>备注：1.季度生产情况表需按季度填报;
              <!-- ，在表头填写对应季节，如春、夏、正秋、晚秋等； -->
              2.方格簇是指使用方格簇上蔟的蚕种张数。</p>
            <p style="color:red;font-size: 16px;padding-top: 10px;">特别注意：若指标项没有数据，请直接填“0”</p>
          </Alert>
        </div>
      </Modal>
    </Form>
    
    <Modal v-model="ViewShow" :mask-closable="false" width="1200">
      <p slot="header" class="title">
        <Icon type="ios-paper" size="20"></Icon>
        <span style="font-size: 20px">表2季度生产情况填报</span>
      </p>
      <p slot="close">
        <Icon type="close-circled" color="red" size=25></Icon>
      </p>
      <table class="reptable" style="width:100%">
        <tr>
          <th>发种量<br/>（张）</th>
          <th>鲜茧产量<br/>（吨）</th>
          <th>鲜茧均价<br/>（元/公斤）</th>
          <th>小蚕共育<br/>（张）</th>
          <th>方格簇<br/>（张）</th>
          <th>预计下季度发种量<br/>（张）</th>
          <th>预计下季度鲜茧产量<br/>（吨）</th>
        </tr>
        <tr style="height:40px;">
          <td style="text-align:right;padding: 4px 7px;">
            {{dataModel.SeedSize}}
          </td>
          <td style="text-align:right;padding: 4px 7px;">
            {{dataModel.FreshCocoonYield}}
          </td>
          <td style="text-align:right;padding: 4px 7px;">
            {{dataModel.AveFreshCocoon}}
          </td>
          <td style="text-align:right;padding: 4px 7px;">
            {{dataModel.SmallRearSilk}}
          </td>
          <td style="text-align:right;padding: 4px 7px;">
            {{dataModel.GridCluster}}
          </td>
          <td style="text-align:right;padding: 4px 7px;">
            {{dataModel.NextSeaOutPut}}
          </td>
          <td style="text-align:right;padding: 4px 7px;">
            {{dataModel.NextSeaFresh}}
          </td>
        </tr>
      </table>
      <div slot="footer">
        <Alert style="margin-top:5px;text-align:left;font-size:14px;" banner type="error">
          <p>备注：1.季度生产情况表需按季度填报;
            <!-- ，在表头填写对应季节，如春、夏、正秋、晚秋等； -->
            2.方格簇是指使用方格簇上蔟的蚕种张数。</p>
          <p style="color:red;font-size: 16px;padding-top: 10px;">特别注意：若指标项没有数据，请直接填“0”</p>
        </Alert>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    data() {
      //整数或保留一位小数
      const validateData = (rule, value, callback) => {
          var reg = /\S/;
          var temp = /^[0-9]\d*(\.\d+)?$/;//数字验证
          var p=/^[0-9]+([.]{1}[0-9]{1})?$/;//匹配整数或带一个小数
          if (reg.test(value)) {
            if (temp.test(value) == false) 
            {
              callback(new Error("必须是大于等于0的数字"));
            }
            else {
              if(p.test(value)==false)
              {
                callback(new Error("只能保留一位小数"));
              }
              else{
                callback();
              }
            }
          } 
          else {
            callback(new Error("不能为空"));
          }
        };
      ///验证整数
      const validateInt = (rule, value, callback) => {
        var reg = /\S/;
        var temp = /^[0-9]\d*(\.\d+)?$/;//数字验证
        var p=/^[0-9]+([.]{1}[0-9]{0})?$/;//匹配整数或带一个小数
        if (reg.test(value)) {
          if (temp.test(value) == false) 
          {
            callback(new Error("必须是大于等于0的数字"));
          }
          else {
            if(p.test(value)==false)
            {
              callback(new Error("只能是整数"));
            }
            else{
              callback();
            }
          }
        } 
        else {
          callback(new Error("不能为空"));
        }
      };
      return {
        datas: {}, //table数据对象
        dataIds: [],
        TableCodeList: this.GetGroupDict("ReportTableName"), //表名称
        CreateYearList: this.GetGroupDict("ReportYear"), //上报年份
        CycleList: this.GetGroupDict("ReportCycle"), //周期
        pageSizeOpts: [20, 40, 50], //默认分页最大设置
        showType: false, //编辑框弹出状态
        ViewShow: false,
        selectTabName: '',
        TabTitleList: [], //tab选项卡列表
        //查询模型：根据需求删除不不要查询条件
        searchModel: {
          ReportCode: 'MulQuartProduc',
          FillInYear: '',
          TimesType: '',
          AreaCode: '',
          PageNumber: 1,
          PageSize: 20
        },
        dataModel: { //编辑模型
          Id: 0,
          ReportId: '',
          SeedSize: '',
          FreshCocoonYield: '',
          AveFreshCocoon: '',
          SmallRearSilk: '',
          NextSeaOutPut: '',
          NextSeaFresh: '',
          GridCluster: ''
        },
        ruleModel:{
            SeedSize:[{validator: validateInt, trigger: 'blur'}],
            FreshCocoonYield:[{validator: validateData, trigger: 'blur'}],
            AveFreshCocoon:[{validator: validateData, trigger: 'blur'}],
            SmallRearSilk:[{validator: validateInt, trigger: 'blur'}],
            NextSeaOutPut:[{validator: validateData, trigger: 'blur'}],
            NextSeaFresh:[{validator: validateInt, trigger: 'blur'}],
            GridCluster:[{validator: validateInt, trigger: 'blur'}]
        },
        ctx: this, //table数据上下文
        columnsList: [{
            title: "报表名称",
            key: "ReportName",
          },
          // {
          //   title: "填报年度",
          //   key: "FillInYearName",
          // },
          // {
          //   title: "属行政区划",
          //   key: "AreaCodeName",
          // },
          // {
          //   title: "填报周期",
          //   key: "TimesTypeName",
          // },
          {
            title: "报表状态",
            width:150,
            key: "StatusName",
            render: (h, params) => {
              switch (params.row.Status * 1) {
                case 0: //审核未通过
                  return h('span', {
                    class: {
                      Error: true
                    }
                  }, params.row.StatusName);
                case 1: //未填写
                  return h('span', {
                    class: {
                      NoReport: true
                    }
                  }, params.row.StatusName);
                case 2: //已填写
                  return h('span', {
                    class: {
                      AlreadyReport: true
                    }
                  }, params.row.StatusName);
                case 3: //已上报
                  return h('span', {
                    class: {
                      UpReport: true
                    }
                  }, params.row.StatusName);
                case 4: //审核通过
                  return h('span', {
                    class: {
                      Success: true
                    }
                  }, params.row.StatusName);
                case 5: //锁定
                  return h('span', {
                    class: {
                      error: true
                    }
                  }, params.row.StatusName);
                default:
                  return h('span', {
                    class: {
                      Default: true
                    }
                  }, params.row.StatusName);
              }
            }
          },
          {
            title: "新增时间",
            key: "StrAddTime",
            width:180
          },
          // {
          //   title: "填报时间",
          //   key: "StrUpdateTime",
          // },
          {
            title: "操作",
            key: "Id",
            width: 360,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  class: {
                    ieditColor: true
                  },
                  props: {
                    type: 'ghost',
                    size: 'small',
                    icon: 'ios-paper-outline'
                  },
                  style: {
                    float:'left',                    
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showInfo(params.row.Id, params.row.ReportCode)
                    }
                  }
                }, '查看'),
                h('Button', {
                  class: {
                    irefreshColor: true
                  },
                  props: {
                    type: 'ghost',
                    size: 'small',
                    icon: 'ios-compose',
                    disabled: params.row.Status > 2
                  },
                  style: {
                    float:'left',                    
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editInfo(params.row.Id, params.row.ReportCode)
                    }
                  }
                }, '填报'),
                h('Upload', {
                  props: {
                    //导入成功后响应窗口
                    onSuccess: () => {
                      this.handleSuccess()
                    },
                    action: this.GetPostUrl(params.row.Id),
                    size: 'small'
                  },
                  style: {
                    float:'left',
                    // marginRight: '5px'
                  }
                }, [h('Button', {
                  class: {
                    searchButton: true
                  },
                  props: {
                    type: 'ghost',
                    size: 'small',
                    icon: 'ios-cloud-upload-outline',
                    disabled: params.row.Status == 3||params.row.Status == 4
                  },
                  style: {
                    marginRight: '5px',
                    float:'left'                    
                  }
                }, '导入')]),
                h('Button', {
                  class: {
                    ieditColor: true
                  },
                  props: {
                    type: 'ghost',
                    size: 'small',
                    icon: 'ios-download',
                    disabled: params.row.Status == 1
                  },
                  style: {
                    float:'left',                    
                    marginRight: '5px'
                    //marginTop: '10px'
                  },
                  on: {
                    click: () => {
                      this.ExcelDown(params.row.Id, params.row.ReportName);
                    }
                  }
                }, '导出'),
                h('Button', {
                  class: {
                    ieditColor: true
                  },
                  props: {
                    type: 'ghost',
                    size: 'small',
                    icon: 'upload',
                    disabled: params.row.Status != 2
                  },
                  style: {
                    float:'left',                    
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.upReport(params.row.Id)
                    }
                  }
                }, '上报'),
              ])
            }
          }
        ],
        clientHeight: window.innerHeight - 260, //表格默认高度
      }
    },
    mounted() {
      //table高度计算方法
      const that = this;
      window.onresize = () => {
        return (() => {
          that.clientHeight = window.innerHeight - 260;
        })()
      };
    },
    methods: {
      upReport(id) {
        var self = this;
        self.$Modal.confirm({
          title: '提示信息',
          content: '<p>是否确认上报？</p>',
          onOk: () => {
            var model = new Object();
            model.Id = id;
            model.reportType = '3';
            model.strMsg = '';
            this.$http.post("Report/PostUpStatus", model).then(
              function (res) {
                if (res.data.status == 1) {
                  self.$Notice.success({
                    title: '已上报！',
                    desc: false
                  });
                  self.getPageData();
                } else {
                  self.$Modal.error({
                    title: "提示信息",
                    content: "数据删除失败!!!"
                  });
                }
              }
            );
          }
        });
      },
      getTab(name) {
        this.selectTabName = name;
      },
      //查看报表
      showInfo(id, reportCode) {
        var self = this;
        this.$http.get("Report", {
          params: {
            id: id,
            reportCode: reportCode
          }
        }).then( //获取数据编辑项的值
          function (res) {
            switch (res.data.list.status) {
              case 1:
                self.dataModel = res.data.list.model;
                self.ViewShow = true;
                break;
              case 0:
                self.$Modal.error({
                  title: "提示信息",
                  content: "编辑数据加载失败!!!"
                });
                break;
              case -1:
                self.$Modal.error({
                  title: "提示信息",
                  content: "编辑数据加载失败!!!"
                });
                break;
            }
          }
        );
      },
      //获取当前页码
      getPageNumber(pageIndex) {
        this.searchModel.PageNumber = pageIndex;
        this.getPageData();
      },
      //获取当前分页大小
      getPageSize(pageSize) {
        this.searchModel.PageSize = pageSize;
        this.getPageData();
      },
      //获取this.datas: {},//table数据对象
      getPageData() {
        var self = this;
        var user = this.GetlocaStorage("CSuserinfo");
        this.searchModel.AreaCode = user.AreaCode;
        self.$http.post('Report/PostPageList', this.searchModel).then(function (res) {
          if (res.data.status === 1) {
            self.datas = res.data;
          } else {
            self.$Modal.error({
              title: '提示信息',
              content: res.data.message
            });
          }
        });
      },
      //编辑获取对象传入id
      editInfo(id, reportCode) { //编辑
        var self = this;
        this.$http.get("Report", {
          params: {
            id: id,
            reportCode: reportCode
          }
        }).then( //获取数据编辑项的值
          function (res) {
            switch (res.data.list.status) {
              case 1:
                self.dataModel = res.data.list.model;
                self.modalShow();
                break;
              case 0:
                self.$Modal.error({
                  title: "提示信息",
                  content: "编辑数据加载失败!!!"
                });
                break;
              case -1:
                self.$Modal.error({
                  title: "提示信息",
                  content: "编辑数据加载失败!!!"
                });
                break;
            }
          }
        );
      },
      checkItem(datas, ItemCode) {
        var res = false;
        for (var i = 0; i < datas.length; i++) {
          if (datas[i].ItemCode == ItemCode) {
            res = true;
          }
        }
        return res;
      },
      checkEmpty(value){
        if(value != null&& value!=""&&value!=" "||value==0||value=="0"){
            return true;
        }else{
            return false;
        }
      },
      //保存方法
      save(name) {
        var self = this;
        // if (self.dataModel.SmallRearSilk<=self.dataModel.SeedSize &&
        //   self.checkEmpty(self.dataModel.AveFreshCocoon) && self.checkEmpty(self.dataModel.FreshCocoonYield)
        //     && self.checkEmpty(self.dataModel.GridCluster) && self.checkEmpty(self.dataModel.NextSeaFresh)
        //     && self.checkEmpty(self.dataModel.NextSeaOutPut) && self.checkEmpty(self.dataModel.SeedSize)
        //     && self.checkEmpty(self.dataModel.SmallRearSilk)) {

        //     } else if(self.dataModel.SmallRearSilk>self.dataModel.SeedSize){
        //       self.$Modal.warning({
        //         title: "提示信息",
        //         content: "请检查,小蚕共育应小于等于发种量!"
        //       });
        //     }else {
        //       this.$Message.error('数据填写有误！！！请检查空白处');
        //     }
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$http.put('MulQuartProduc', self.dataModel).then(
              function (res) {
                if (res.data.status == 1) {
                  self.getPageData(); //读取分页数据
                  self.modalHide(); //关闭modal
                  self.$Notice.success({
                    title: '保存成功！',
                    desc: false
                  });
                } else {
                  self.$Modal.warning({
                    title: "提示信息",
                    content: "更新失败,请与管理员联系!"
                  });
                }
              });
          }
          else{
            this.$Notice.error({
                    title: '数据验证出错,请根据提示操作后再试!',
                    desc: '',
                });
          }
          });
      },
      //编辑框打开
      modalShow() {
        this.showType = true;
      },
      //编辑框关闭
      modalHide() {
        this.showType = false;
      },
      //取消方法
      cancel() {
        this.showType = false; //关闭modal
        this.TabTitleList = [];
      },
      //重置model
      restModel(modelname) {
        this.$refs[modelname].resetFields(); //重置model
      },
      //模板下载
      TmpDown: function () {
        window.open(this.$http.defaults.baseURL + "Report/GetTemplateData?ReportCode=" + this.searchModel.ReportCode);
      },
      //导出
      ExcelDown: function (ReportId, ReportName) {
        var self = this;
        window.open(this.$http.defaults.baseURL + "MulQuartProduc/GetExcelData?ReportId=" + ReportId +
          "&&ReportName=" + ReportName);
      },
      //导入
        GetPostUrl(ReportId) {
            var url = this.$http.defaults.baseURL + "Report/PostImportDataTwo?ReportId=" + ReportId + "&&ReportCode=" + this.searchModel.ReportCode;
            return url;
        },
        handleSuccess() {
            this.getPageData();
            this.$Notice.success({
                title: '数据导入成功！',
                desc: false
            });
        },
    },
    //创建Vue页面方法
    created: function () {
      //创业Vue前调用获取this.datas: {},//table数据对象
      this.getPageData();
    },
    watch: {
      //需要监听的在此处新增监听对象
    }
  }

</script>
